let _Vue = null
class VueRouter {
  static install (Vue) {
    // 1 判断当前插件是否被安装
    if (VueRouter.install.installed) {
      return
    }
    VueRouter.install.installed = true
    // 2 把Vue的构造函数记录在全局
    _Vue = Vue
    // 3 把创建Vue的实例传入的router对象注入到Vue实例
    // _Vue.prototype.$router = this.$options.router
    _Vue.mixin({
      beforeCreate () {
        if (this.$options.router) {
          _Vue.prototype.$router = this.$options.router
        }
      }
    })
  }

  constructor (options) {
    this.options = options
    this.mode = options.mode || 'hash'
    this.routeMap = {}
    // observable
    this.data = _Vue.observable({
      current: this.mode === 'hash' ? '#/' : '/'
    })
    this.init()
  }

  init () {
		const _this = this
    this.createRouteMap()
    this.initComponent(_Vue, _this)
    this.initEvent(_this)
  }

  createRouteMap () {
    // 遍历所有的路由规则 吧路由规则解析成键值对的形式存储到routeMap中
    if (this.mode === 'history') {
      this.options.routes.forEach(route => {
        this.routeMap[route.path] = route.component
      })
    }
    if (this.mode === 'hash') {
      this.options.routes.forEach(route => {
        this.routeMap['#' + route.path] = route.component
      })
    }
  }

  initComponent (Vue, _this) {
    Vue.component('router-link', {
      props: {
        to: String
      },
      render (h) {
        return h(
          'a',
          {
            attrs: {
              href: this.to
            },
            on: {
              click: this.clickhander
            }
          },
          [this.$slots.default]
        )
      },
      methods: {
        clickhander (e) {
          if (_this.mode === 'hash') {
            location.hash = '#' + this.to
            this.$router.data.current = location.hash
          }
          if (_this.mode === 'history') {
            history.pushState({}, '', this.to)
            this.$router.data.current = this.to
          }
					e.preventDefault()
        }
      }
      // template:"<a :href='to'><slot></slot><>"
    })
    Vue.component('router-view', {
      render (h) {
        // self.data.current
        const cm = _this.routeMap[_this.data.current]
        return h(cm)
      }
    })
  }

  initEvent (_this) {
    // 监听地址栏的改变
		if (_this.mode === 'history') {
			window.addEventListener('popstate', () => {
				this.data.current = window.location.pathname
			})
		}
		if (_this.mode === 'hash') {
			window.addEventListener('hashchange', () => {
				this.data.current = window.location.hash
			})
		}
  }
}

export default VueRouter
